<template>
  <el-dialog
    title="添加"
    :visible="dialogVisible"
    :before-close="closeEvent"
    fullscreen
  >
    <template #title>
      <div class="title">新增题库测试</div>
    </template>

    <!-- 表单 开始-->
    <div class="add">
      <el-form :model="form" class="form" :rules="rules" ref="form">
        <el-form-item label="学科">
          <el-select v-model="form.subject">
            <el-option
              v-for="(value, key, index) in subjectArr"
              :key="index"
              :label="value.intro"
              :value="value.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="阶段">
          <el-select v-model="form.stepObj">
            <el-option
              v-for="(value, key, index) in stepObj"
              :key="index"
              :label="value"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业">
          <el-select v-model="form.enterprise">
            <el-option
              v-for="(value, key, index) in companyList"
              :key="index"
              :label="value.name"
              :value="value.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item label="题型">
          <el-radio-group v-model="form.typeObj">
            <el-radio label="单选"></el-radio>
            <el-radio label="多选"></el-radio>
            <el-radio label="简答"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="难度">
          <el-radio-group v-model="form.difficulty">
            <el-radio
              v-for="(val, key, index) in diffObj"
              :key="index"
              :label="val"
              :value="key"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
        <hr />

        <!-- 文本编辑器 -->
        <el-form-item>
          <quillEditor prop="form.title"></quillEditor>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEvent">取 消</el-button>
        <el-button type="primary" @click="closeEvent">确 定</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { regionDataPlus } from 'element-china-area-data'

export default {
  name: 'Add',
  data () {
    return {
      form: {
        title: '', // 是	string	标题
        subject: '', // 是	int	学科id标识
        step: '', // 是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', // 是	int	企业id标识
        city: [], // 是	array	[省、市、区县]
        type: '', // 是	string	题型 1单选 、2多选 、3简答
        difficulty: '', // 是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: '', // 是	string	单选题答案
        multiple_select_answer: [], // 是	array	多选题答案
        short_answer: '', // 是	string	简答题答案
        video: '', //	string	解析视频地址
        answer_analyze: '', // 是	string	答案解析
        remark: '', // 是	string	答案备注
        select_options: [] // 是	array	选项，介绍，图片介绍
      },
      rules: {},
      cityList: {},
      text: {},
      options: regionDataPlus,
      selectedOptions: []
    }
  },
  props: [
    'dialogVisible',
    'companyList',
    'subjectArr',
    'typeObj',
    'diffObj',
    'stepObj'
  ],

  components: {
    quillEditor
  },
  methods: {
    closeEvent () {
      this.$refs.form.resetFields()
      this.form = {
        title: '', // 是	string	标题
        subject: '', // 是	int	学科id标识
        step: '', // 是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', // 是	int	企业id标识
        city: [], // 是	array	[省、市、区县]
        type: '', // 是	string	题型 1单选 、2多选 、3简答
        difficulty: '', // 是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: '', // 是	string	单选题答案
        multiple_select_answer: [], // 是	array	多选题答案
        short_answer: '', // 是	string	简答题答案
        video: '', //	string	解析视频地址
        answer_analyze: '', // 是	string	答案解析
        remark: '', // 是	string	答案备注
        select_options: [] // 是	array	选项，介绍，图片介绍
      }
      this.$nextTick(() => {
        console.log('destrory')
      })
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style>
.title {
  width: 100%;
  height: 53px;
  line-height: 53px;
  padding-left: 15px;
  color: #fff;
  background: linear-gradient(to right, #01c4fa, #1294fa);
}
.el-dialog__header {
  padding: 0;
}
.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.add {
  width: 700px;
  margin: 0 auto;
}
</style>
